<template>
	<view style="background-color: #F5F5F5;height: 100vh;">
		<view class="header" :style="'padding-top: '+bartop+'px; padding-bottom:10rpx'">
			<view class="goodsmsgheader headertop" style="width: 100%;">
			      <navigator open-type="navigateBack" style="padding:10rpx">
			        <image src="https://x.bilinmeiju.com/static/myfangchan/zjt.png" mode="aspectFit"></image>
			      </navigator>
			      <text>选择小区</text>
			      <!-- <image src="/static/goodsmsghei.png" mode="aspectFit" bindtap="showmsg" wx:if="{{cartlen=='00'?false:true}}"><text>{{cartlen}}</text></image> -->
			  </view>
		</view>
		<view class="top1 topnext">
			<view class="center" @click="gocity()">
				<image class="centerimg" src="https://x.bilinmeiju.com/static/sqgl/yjjx.png" mode=""></image>
				<input class="centerinput" type="text" placeholder="请输入城市名称" placeholder-style="color=#F4652F">
			</view>

			<view class="box">
				<view class="" style="height: 20rpx;"></view>
				<view class="box1">
					<image class="box1img" src="https://x.bilinmeiju.com/static/sqgl/dwxq.png" mode=""></image>
					<view class="box1text">
						定位附近社区
					</view>
				</view>
				<view class="box2" v-for="(item,index) in list" :key="index" @click="setshequid(item.communityName,item.communityId)">
					<view class="box2-1" >
						<image class="box2-1img" src="https://x.bilinmeiju.com/static/sqgl/fangz.png" mode=""></image>

						<view class="box2-2">
							<view class="box2-2text1">{{item.communityName}}</view>
							<view class="box2-2text2">{{item.addressDetail}}</view>
						</view>
					</view>
					<view class="box2-3">
						<image class="box2-3img" :src="communityId==item.communityId?'https://x.bilinmeiju.com/static/denglu/xz.png':'https://x.bilinmeiju.com/static/denglu/wzx.png'" mode=""></image>
					</view>
				</view>
				
				<view class="" style="height: 20rpx;"></view>
			</view>
		</view>
	</view>
</template>


<script>
	var that = this;
	export default {
		data() {
			return {
				CustomBar: 0,
				top:0,
				list:[],
				nextp:1,
				communityId:0,
				bartop:0
			}
		},
		onLoad() {
			that = this;
			
			this.bartop = this.$bartop;
			that.lnglat = uni.getStorageSync('lnglat');
			that.communityId = uni.getStorageSync('communityId');
			that.getshequ();
			if(!that.lnglat){
				wx.getFuzzyLocation({
				 type: 'wgs84',
				 
				 complete(e) {
				 	const latitude = e.latitude
				 	const longitude = e.longitude
					that.$post('api/getcity',{lng:longitude,lat:latitude}).then(res=>{
						console.log(res);
						that.city = res.data.shi;
						uni.setStorageSync('city',res.data.shi);
						uni.setStorageSync('lnglat',res.data.lng+','+res.data.lat);
						that.getshequ();
					})
				 }
				})
			}else{
				that.getshequ();
			}
		},
		methods: {
			getshequ(){
				var lnglat = that.lnglat;
				var city = uni.getStorageSync('city');
				that.$post('api/getshequ',{lnglat:lnglat,city:city,p:that.nextp}).then(res=>{
					that.list = res.data.list;
					that.nextp = res.data.nextp;
					// if(!that.communityId) that.communityId = that.list[0].communityId;
				})
			},
			setshequid(name,communityId){
				uni.setStorageSync('shequ',name);
				uni.setStorageSync('communityId',communityId);
				var token = uni.getStorageSync('token');
				// if(!token){
				// 	uni.reLaunch({
				// 		url:'/pages/login/login'
				// 	})
				// }else{
					uni.navigateBack()
				// }
			},
			gocity(path,type){
				uni.navigateTo({
					url:'/pages/shequgeli/chengshixuanz'
				})
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>
	.beijing {
		width: 100vw;
		height: 174rpx;
		z-index: 1;
		position: absolute;
		top: 0;
	}

	.top {
		z-index: 5;
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		/* align-items: flex-end; */
	}

	.toptext {
		z-index: 5;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #ffffff;
		line-height: 20rpx;
	}

	.top1 {
		/* margin-top: 50rpx; */
	}

	.top1img {
		z-index: 5;
		width: 20rpx;
		height: 36rpx;
	}

	.center {
		width: 720rpx;

		padding-top: 35rpx;
		margin: 0 auto;
	}

	.centerimg {
		width: 712rpx;
		height: 90rpx;

	}

	.centerinput {
		margin-top: -80rpx;
		margin-left: 40rpx;
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #F4652F;
		line-height: 20rpx;
		opacity: 0.5;
	}

	.box {
		width: 712rpx;
		margin: 0 auto;
		margin-top: 57rpx;
		background-color: white;
		border-radius: 15rpx;
	}

	.box1 {
		margin-left: 30rpx;
		display: flex;
		align-items: center;
	}

	.box1img {
		width: 45rpx;
		height: 45rpx;
	}

	.box1text {
		margin-left: 13rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
		line-height: 20rpx;
	}

	.box2 {
		margin: 35rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.box2-1 {
		margin-left: 30rpx;
		display: flex;
	}

	.box2-1img {
		width: 30rpx;
		height: 30rpx;
	}

	.box2-2 {
		margin-left: 19rpx;
	}

	.box2-2text1 {
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #333333;
		line-height: 28rpx;
	}

	.box2-2text2 {
		margin-top: 25rpx;
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
		line-height: 24rpx;
	}

	.box2-3 {
		margin-right: 32rpx;
	}

	.box2-3img {
		width: 32rpx;
		height: 32rpx;
	}
</style>
